<h3 *ngIf="header">{{ header }}</h3>

<button mat-stroked-button color="primary" (click)="addCtrl()" class="add-btn">
  <mat-icon>add</mat-icon>{{ addButtonText }}
</button>

<div class="flex-column">
  <div
    *ngFor="let ctrl of formArray.controls; let i = index"
    class="key-value-entry"
  >
    <mat-form-field appearance="outline">
      <mat-label>{{ keyLabel }}</mat-label>
      <input [formControl]="ctrl.get('key')" matInput />
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>{{ valueLabel }}</mat-label>
      <input [formControl]="ctrl.get('value')" matInput />
    </mat-form-field>

    <button
      mat-icon-button
      matSuffix
      (click)="removeCtrl(i)"
      matTooltip="Remove item from the list"
      class="delete-btn"
    >
      <mat-icon>delete</mat-icon>
    </button>
  </div>
</div>
